<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>amStock Example</title>
		<link rel="stylesheet" href="../amcharts/style.css" type="text/css">
		<link rel="stylesheet" href="style.css" type="text/css">

		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
		<script src="../amcharts/serial.js" type="text/javascript"></script>
		<script src="../amcharts/amstock.js" type="text/javascript"></script>

        <!-- scripts for exporting chart as an image -->
		<!-- Note, the exporting will work only if you view the file from web server -->
		<!-- Exporting to image works on all modern browsers except IE9 (IE10 works fine) -->
		<!--[if (!IE) | (gte IE 10)]> -->
        <script type="text/javascript" src="../amcharts/plugins/export/export.js"></script>
        <link  type="text/css" href="../amcharts/plugins/export/export.css" rel="stylesheet">
		<!-- <![endif]-->
		<script>
			var chartData = [];

			function generateChartData() {
				var firstDate = new Date(2012, 0, 1);
				firstDate.setDate(firstDate.getDate() - 1000);
				firstDate.setHours(0, 0, 0, 0);

				for (var i = 0; i < 1000; i++) {
					var newDate = new Date(firstDate);
					newDate.setHours(0, i, 0, 0);

					var a = Math.round(Math.random() * (40 + i)) + 100 + i;
					var b = Math.round(Math.random() * 100000000);

					chartData.push({
						date: newDate,
						value: a,
						volume: b
					});
				}
			}

			generateChartData();

			var chart = AmCharts.makeChart("chartdiv", {
				type: "stock",
				categoryAxesSettings: {
					minPeriod: "mm"
				},

				dataSets: [{
					color: "#b0de09",
					fieldMappings: [{
						fromField: "value",
						toField: "value"
					}, {
						fromField: "volume",
						toField: "volume"
					}],
					dataProvider: chartData,
					categoryField: "date"
				}],

				panels: [{

						showCategoryAxis: false,
						title: "Value",
						percentHeight: 70,


						stockGraphs: [{
							id: "g1",
							valueField: "value",
							type: "smoothedLine",
							lineThickness: 2,
							bullet: "round",
							bulletBorderColor: "#FFFFFF",
							bulletBorderAlpha: 1,
							bulletBorderThickness: 3
						}],



						stockLegend: {
							valueTextRegular: " ",
							markerType: "none"
						}
					},

					{
						title: "Volume",
						percentHeight: 30,

						stockGraphs: [{
							valueField: "volume",
							type: "column",
							cornerRadiusTop: 2,
							fillAlphas: 1
						}],

						stockLegend: {
							valueTextRegular: " ",
							markerType: "none"
						}
					}
				],

				chartScrollbarSettings: {
					graph: "g1",
					usePeriod: "10mm",
					updateOnReleaseOnly:false
				},

				chartCursorSettings: {
					valueBalloonsEnabled: true,
					valueLineEnabled: true,
					valueLineBalloonEnabled: true
				},

				periodSelector: {
					dateFormat: "YYYY-MM-DD HH:NN",
					inputFieldWidth: 150,
					periods: [{
						period: "hh",
						count: 1,
						label: "1 hour"
					}, {
						period: "hh",
						count: 2,
						label: "2 hours"
					}, {
						period: "hh",
						count: 5,
						label: "5 hour"
					}, {
						period: "hh",
						count: 12,
						label: "12 hours"
					}, {
						period: "MAX",
						label: "MAX"
					}]
				},

				panelsSettings: {
					usePrefixes: true,
					creditsPosition: "bottom-right"
				},


				"export": {
					"enabled": true,
					// override some of the defaults (Stock Chart specific)
					"periodSelector": {
						"position": "left"
					},
					"dataSetSelector": {
						"position": "left"
					}
				}
			});

		</script>
	</head>
	<body style="background-color:#FFFFFF">
		<span style="font-size: 10; color: #CC0000;">
			<p>Warning! Exporting to image works only if you view this file from web server. Exporting works with all modern browsers except IE9 (works fine with IE10).</p>
            <p>Since version 3.14 chart export is done using dedicated plugin, located in amCharts/plugins/export folder. Please refer to bundled examples and README.md file for more information.</p>
		</span>
		<div id="chartdiv" style="width:100%; height:600px;"></div>
	</body>

</html>